<template>
    <div>
        <div class="row">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#navbar">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand"></a>
                    </div>
                    <div class="collapse navbar-collapse" id="navbar">
                        <ul class="nav navbar-nav">
                            <li class="dropdown active">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    项目列表
                                    <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li v-for="project in projects">
                                        <router-link :to="'/project/'+project.project_id">{{project.project_name}}</router-link>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <router-link to="/version">版本变更记录</router-link>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <router-view name="project" :project_id="project_id"></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                projects: []
            }
        },
        computed: {
            project_id: function () {
                return this.$route.params.project_id;
            }
        },
        created: function () {
            this.get_project();
        },
        methods: {
            get_project: function () {
                axios({
                    method: 'get',
                    url: '/api/project'
                }).then(this.handleGetProject);
            },
            handleGetProject: function (response) {
                this.projects = response.data.data;
            }
        }
    }
</script>

<style scoped>

</style>